<template>
  <el-container>
    <el-aside :style="'width:'+menu_width+'px;'">
      <el-menu :default-openeds="['main','cloud']">
        <el-sub-menu index="main">
          <template #title>GitFileList</template>
          <el-menu-item index="main" :class="selTab=='main'&&'select'" @click="selTab='main';">默认页</el-menu-item>
          <el-menu-item index="list" :class="selTab=='list'&&'select'" @click="selTab='list';">版本列表</el-menu-item>
          <!-- <el-sub-menu index="3">
            <template #title>Option4</template>
            <el-menu-item index="3-1" :class="selTab=='3-1'&&'select'" @click="selTab='3-1';">Option 4-1</el-menu-item>
          </el-sub-menu> -->
        </el-sub-menu>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header>
        <el-button :icon="menu_width==200?'ArrowLeft':'ArrowRight'" size="small" circle @click="menuChange"></el-button>
      </el-header>
      
      <!-- 默认页 -->
      <el-main v-if="selTab=='main'"><Default /></el-main>
      
      <!-- 版本列表 -->
      <el-main v-if="selTab=='list'"><List /></el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  
  import Default from './components/Default.vue'
  import List from './components/List.vue'

  const menu_width=ref(200)
  const selTab=ref('main')
  const menuChange=()=>{
    menu_width.value=menu_width.value==200?0:200
  }
</script>

<style>
  /* 左侧栏 */
  .el-aside{
    height: 100%;
    transition: width .2s;
  }
  .el-aside,.el-aside .el-menu{
    background-color: rgba(40,44,52);
  }
  .el-aside .el-sub-menu__title{
    color:#fff;
    font-size: 16px;
  }
  .el-aside .el-menu-item,.el-aside .el-menu-item.is-active{
    color:#fff;
  }
  .el-aside .el-menu-item:hover,.el-aside .el-sub-menu__title:hover,.el-aside .select{
    background-color: #2894ff;
  }
  .el-menu{
    border-right: none!important;;
  }

  /* 右侧头部 */
  .el-header {
    background-color: #B3C0D1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px!important;
  }
</style>